<template>
    <div class="white-box">
        <el-form ref="rulePassRef" :model="rulePassForm" :rules="ruleCheckPass" label-width="120px">
<!--            <el-form-item label="原密码" prop="old_pass">-->
<!--                <el-input v-model.trim="rulePassForm.old_pass" type="password" autocomplete="new-password" clearable placeholder="请输入原密码" />-->
<!--            </el-form-item>-->
            <el-form-item label="新密码" prop="new_pass">
                <el-input v-model.trim="rulePassForm.new_pass" type="password" autocomplete="new-password" clearable placeholder="请输入新密码" />
            </el-form-item>
          <el-form-item label="确认密码" prop="re_new_pass">
            <el-input v-model.trim="rulePassForm.re_new_pass" type="password" autocomplete="new-password" clearable placeholder="请输入确认新密码" />
          </el-form-item>
            <el-form-item>
                <div class="flexs" style="margin-top: 30px">
                    <el-button type="primary" :loading="form_loading" @click="submitPassForm(rulePassRef)">确认修改</el-button>
                    <el-button @click="resetPassForm(rulePassRef)">重置</el-button>
                </div>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup>
import JSEncrypt from "jsencrypt"
import {getCurrentInstance, ref, onMounted, reactive, computed} from "vue"
import { useRouter } from "vue-router"
import { useBaseStore } from "@store/base"

const { proxy } = getCurrentInstance()
const router = useRouter()
const store = useBaseStore()
const info = computed(() => {
  return store.userinfo
})

onMounted(() => {
  getKey();
 
})

/**
 * 修改密码
 * @property {Boolean} form_loading 提交按钮状态
 * @property {Array} rulePassRef 表单规则
 * @property {Object} rulePassForm  表单字段
 * @property {Object} ruleCheckPass  表单提示
 * @property {Function} submitPassForm 提交表单
 */
const form_loading = ref(false)
const rulePassRef = ref(null)
const rulePassForm = reactive({
    old_pass: "",
    new_pass: "",
    re_new_pass:""
})
const ruleCheckPass = reactive({
    // old_pass: [{ required: true, message: "请输入原密码", trigger: "blur" }],
    new_pass: [{ required: true, message: "请输入新密码", trigger: "blur" }],
    re_new_pass: [{ required: true, message: "请输入新密码", trigger: "blur" }],
})
const submitPassForm = (formEl) => {
    if (!formEl) return
    formEl.validate((valid, fields) => {
        if (valid) {
            let sid = info.value.sid;
            if(rulePassForm.new_pass != rulePassForm.re_new_pass){
              proxy.$message({message:'两次密码不一致。',type:"error"})
              return false;
            }
            let encryptor = new JSEncrypt() // 创建加密对象实例
            encryptor.setPublicKey(pub_keys.value) // 设置公钥
            let password = encryptor.encrypt(rulePassForm.new_pass) // 对内容进行加密
            form_loading.value = true
            proxy.$axios
                .put(`/users/${sid}/pas`, {
                  password:password
                    // password: rulePassForm.old_pass,
                    // new_password: rulePassForm.new_pass,
                })
                .then((res) => {
                    form_loading.value = false
                    if (res.data.code == 200) {
                      proxy.$message({
                        message: "密码修改成功，请重新登录",
                        type: "success"
                      })
                      setTimeout(()=>{
                        router.push("/")
                      },1500)
                    } else {
                        proxy.$message({message:res.data.msg,type:"error"})
                    }
                })
                .catch((err) => {
                    form_loading.value = false
                })
        }
    })
}
const resetPassForm = (formEl) => {
    if (!formEl) return
    formEl.resetFields()
}
const pub_keys = ref("")
function getKey() {
  proxy.$axios
      .get("authentication/public-key")
      .then((res) => {
        // console.log(res);
        if (res.data.code === 200) {
          pub_keys.value = res.data.data
        } else {
          proxy.$message({ message: res.data.msg, type: "error" })
        }
      })
      .catch((err) => {})
}
</script>
<script>
export default {
    name: "ChangePass",
}
</script>

<style lang="less" scoped>
.el-form {
    width: 400px;
}
</style>
